<template>
  <div class="tool-text border border-gray-1600 py-7 px-6 rounded-md">
    <h2 class="bar-title break-words">
      <span class="text-gray-1000 font-bold text-26 leading-7 break-words w-full">
        {{$t(title,{toolName: tool.name})}}
      </span>
    </h2>
    <div class="mt-7 text-base text-gray-1000 leading-8 break-words"
      v-html="descText">
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'GptsToolDetailText',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    title: {
      type: String,
      default: '',
    },
    desc: {
      type: String,
      default: '',
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
    descText() {
      return this.desc.replace(/\n/g, '<br>')
    },
  },
}
</script>